// 日间模式
$login-btn: #05a2e5;
$login-btn-hover: #04b0fa;
$login-btn-shadow: rgba(190, 227, 243, 0.2);
$background: #f8f8f8;
$background-box: #ffffff;
$borderColor: #e6e6e6;
$fontColor: #1f232f;
$fontColor-minor: #2d2e30;
$fontColor-light: rgba(31, 35, 47, 0.6);
$fontColor-gray: #8d909b;
$background-equipNum: #cccccc;
$background-equipNum-check: #4f535f;
$equipNum-icon: #bfbfbf;
$inputBorder: #979797;
$lightBack: #252833;
$btn-blue: #3875ff;
$dialog-background: #ebebeb;
$black: #000;
$aside-font: rgba(240, 244, 255, 0.88);
$aside-font2: rgba(240, 244, 255, 0.64);
$aside-font3: rgba(56, 117, 255, 1);
// 夜间模式
$n-fontColor: #ffffff;
$n-cardColor: #313747;
$n-backColor: #0c0e14; //背景色
$n-middleColor: #181c29; //中间色
$n-frondColor: #252833; //前景色
$n-frondLight: #313747; //前景色-突出
$n-frondHigh: #3b4357; //前景色-高亮
$n-borderColor: rgba(240, 244, 255, 0.16); // 文本色-最次
// 评审公共样式
$main-padding: 16px; // 主内容主体边距、主内容标题内边距
$main-titleHeight: 48px; // 主内容标题高度
$bottomHeight: 48px; // 底部栏高度 (主内容&副内容)
$bottomPadding: 8px 0 16px; // 底部栏边距 (主内容&副内容)
$sub-padding: 8px; // 副内容主体边距
$sub-cardTight: 8px; //副内容选项边距 (紧凑)
$sub-cardLoose: 8px; //副内容选项边距 (宽松)
$sub-titlePadding: 16px; // 副内容标题区边距
$title-btn: 28px; // 标题区按钮高度
$small-btn: 32px; // 小按钮
$big-btn: 40px; // 大按钮
$alartFooterHeight: 64px; //弹窗底部高度
$labelColor: rgba(240, 244, 255, 0.64); // 表单标签名颜色,表单placeHolder颜色
$inputColor: rgba(240, 244, 255, 1); // 输入文字颜色
$scout-inputHeight: 28px; // 标题输入框高
$inputHeight: 32px; // 普通&表单输入框（下拉框）高度
$popper-font: rgba(240, 244, 255, 0.88);
$list-FontSize: 16px;
// 最新界面
// 主题色
$themeColor_1: #3875ff;
$themeColor_2: #226bcc;
$themeColor_3: #195098;
$themeColor_4: #113464;
$themeColor_success: #63e03f;
$themeColor_alarm: #f22433;
$themeColor_warning: #f5bb36;
$themeColor_purple: #eb2fbc;
// 文本色
$headerTitle: #91a2af;
$textColor_1: #f0f4ff;
$textColor_2: rgba(240, 244, 255, 0.88);
$textColor_3: rgba(240, 244, 255, 0.56);
$textColor_4: rgba(240, 244, 255, 0.32);
$textColor_5: rgba(240, 244, 255, 0.16);
$textColor_6: rgba(240, 244, 255, 0.56);
$textColor_7: rgba(240, 244, 255, 0.08);
$bjColor_1: #090f1a; // 背景色
$middleColor_1: #181c29; //中间色
// 前景色
$foregroundColor_1: #252833;
$foregroundColor_1_2: rgba(37, 40, 51, 0.88);
$foregroundColor_2: #313747;
$foregroundColor_3: #3b4357;
$foregroundColor_4: #2f3544;
$icon_color: #000b17;
//列表双行颜色
$listDouColor: #07253e;
$listSelected: #103e66;
// 为换肤增加的样式
$linearBg: linear-gradient(-43deg, #181c29, #3b4357);
$linearBtnBg: #3b4357;
$linearBtnHoverBg: #2f3544;
$linearHeaderBg: #313747;
$asideHeader: #313747;
$asideBg: #252833;
$asideColor: rgba(240, 244, 255, 0.56);
$asideBorder: rgba(240, 244, 255, 0.16);
$asideHoverBg: #181c29;
$asideHoverColor: #f0f4ff;
$foldBg: #181c29;
$foldColor: rgba(240, 244, 255, 0.88);

// 按钮 $btn-
$btn-login: rgba(39,121,230,0.32);
// 边框 $border-

// 线条 $line-

// Tab $tab-

// 输入框 $input-

// textarea $textarea-

// 表格 $table-

// 图片 $img-

// 容器(div、section等背景) $con-

// 弹窗 $dialog-

// 提示 $tips-

// 文本 $txt-

// 选中框-单选-多选 $sel-

// 分页 $page-

// 为换肤增加的样式--end

//统一字体处理
html,
body {
    font-size: 16px;
}

$fontH36: 36px;
$fontH30: 30px;
$fontH24: 24px;
$fontH20: 20px;
$fontH18: 18px;
$fontH16: 16px;
$fontH14: 14px;
$fontH12: 12px;

// 统一提示字体处理
.success {
    color: $themeColor_success !important;
}

.warning {
    color: $themeColor_warning !important;
}

.purple {
    color: $themeColor_purple !important;
}

.primary {
    color: $themeColor_1 !important;
}

// 设备实时状态---圆点状态颜色
.noComm {
    // 不通讯
    color: #a0a0a0 !important;
}

.normal {
    // 通讯正常
    color: #63e03f !important;
    background-color: #63e03f !important;
}

.alarm {
    // 有报警
    color: #f22433 !important;
    background-color: #f22433 !important;
}

.lsSet {
    // 正在进行设置
    color: #bebcaa !important;
    background-color: #bebcaa !important;
}

.initialize {
    // 正在初始化
    color: #289ac0 !important;
    background-color: #289ac0 !important;
}

.withdraw {
    // 撤防
    color: pink !important;
    background-color: pink !important;
}

@mixin font-color1() {
    /*通过该函数设置字体颜色，后期方便统一管理；*/
    // color: $font-color-theme1 !important;

    // [data-theme="theme1"] & {
    //     color: $font-color-theme1 !important;
    //     // $font-color-theme1: blue;

    // }

    // [data-theme="theme2"] & {

    //     color: $font-color-theme2 !important;
    // }
}

//火狐滚动条样式
@mixin firefoxScroll {
    scrollbar-color: #313747 transparent;
    scrollbar-width: thin;
}

// 单行超出省略号
@mixin whiteSpace {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// 360度图片旋转
@keyframes radar-beam {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
    border-top-color: #595959 !important;
}

@mixin font18 {
    font-size: 18px;
}
@mixin font16 {
    font-size: 16px;
}
@mixin font14 {
    font-size: 14px;
}
@mixin font12 {
    font-size: 12px;
}
/* 组件样式 */

// 左侧列表
@mixin main-list {
    @media screen and (min-width: 1440px) {
        width: 370px;
    }

    @media screen and (max-width: 1440px) {
        width: 320px;
    }
}

@mixin list-height {
    font-size: 14px;
    height: 40px;
    line-height: 40px;
}

// 左侧列表顶部的标题、icon、搜索框
@mixin list-title {
    width: 100%;
    height: 120px;
    font-size: 24px;
    color: $textColor_1;

    > div {
        width: 100%;

        &:first-of-type {
            padding-right: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .iconfont {
            font-size: 24px;
            margin-left: 8px;
            padding: 8px;
        }

        /deep/ .el-button {
            width: 30px;
            height: 30px;
            margin-left: 8px;
            padding: 8px;
            font-size: 14px;

            .iconfont {
                font-size: 24px;
            }
        }
    }

    /deep/ .el-input {
        width: calc(100% - 8px);

        .el-input__inner {
            height: 40px;
            background-color: $n-backColor;
        }
    }
}

// 除左侧列表主区域
@mixin main-container {
    @media screen and (min-width: 1440px) {
        width: calc(100% - 370px);
    }

    @media screen and (max-width: 1440px) {
        width: calc(100% - 320px) !important;
    }
}

// 主区域顶部
@mixin page-header {
    height: 64px;
    font-size: 24px;
    color: $textColor_1;
    padding-left: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-input {
        margin-left: 16px;

        .el-input__inner {
            height: 32px;
            background-color: $n-backColor;
        }
    }

    .el-select {
        margin-left: 16px;

        .el-input {
            margin-left: 0;

            .el-input__inner {
                height: 32px;
                background-color: $n-backColor;
            }
        }
    }

    .el-button {
        height: 32px;
        margin-left: 16px;
    }
}

// tab外层div
@mixin tab-header {
    .el-tabs__header {
        margin-bottom: 0;
        border-radius: 3px;
        border-bottom: none;
        background: $n-backColor;

        .el-tabs__nav {
            border: none;

            .el-tabs__item {
                height: unset !important;
                word-break: break-all;
                line-height: 28px;
                word-wrap: break-word;
                white-space: break-spaces;
                word-break: normal;
                font-size: 14px;
                text-align: center;
                margin: 2px;
                background: $n-backColor;
                color: $aside-font2;
                border-left: none;
                border-radius: 1px;
                display: inline-block;
            }

            .el-tabs__item:hover {
                color: #3875ff;
                transition: 0.3s;
            }

            .is-active {
                background: $foregroundColor_3;
                color: $textColor_1 !important;
                border-bottom: none;
            }
        }
    }
}

// 分页组件外层div
@mixin pagination {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;

    /deep/ .el-pagination {
        padding: 0;

        .el-input__inner {
            height: 32px;
        }

        .el-pagination__sizes,
        .el-pagination__editor {
            .el-input__inner {
                height: 32px;
            }
        }

        button {
            width: 32px;
            height: 32px;
        }

        .el-pager {
            li {
                width: 32px;
                height: 32px;
                line-height: 32px;
            }
        }
    }
}

// 公共底层按钮
@mixin btn {
    width: 100%;
    color: $textColor_2;
    display: block;
    text-align: right;
    margin: 0;

    span {
        width: 60px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 14px;
        border-radius: 3px;
        display: inline-block;
        background-color: $n-frondHigh;
        cursor: pointer;

        &:nth-child(1) {
            right: 70px;
        }

        &:nth-child(2) {
            background-color: $themeColor_1;
        }
    }
}

@mixin nativeBtn {
    display: inline-block !important;
    width: 60px;
    height: 28px;
    vertical-align: middle;
    font-size: 14px;
}

// 实时视频顶部dropdpwn组件
.video-header-left {
    padding: 8px !important;

    .layout {
        padding: 0;
        display: flex;
        justify-content: space-between;

        li {
            padding: 5px;

            &:nth-child(n + 2) {
                margin-left: 5px;
            }

            color: $textColor_1;
            cursor: pointer;
            border-radius: 3px;
            border: 1px solid $lightBack;
            transition: all 0.2s;

            &:hover {
                color: $themeColor_1;
                border: 1px solid $themeColor_1;
            }
        }

        .switchBlockNumActive {
            color: $themeColor_1;
            border: 1px solid $themeColor_1;
        }
    }
}

//暂无数据
@mixin noDataTips {
    line-height: 30px !important;
    width: 50%;
    color: #999fa8;

    .noData {
        height: 80%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        user-select: none;

        .tip {
            font-size: $fontH16;
            display: flex;
            line-height: 50px;
            justify-content: center;
            align-items: center;
            color: #ced2dd;
        }

        div {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #646774;
            line-height: 30px;

            /deep/ .el-button {
                color: white;
                border: unset !important;
                background-color: transparent !important;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: unset;

                .iconfont {
                    margin-right: 4px;
                    font-size: 1.25rem;
                    cursor: pointer;
                }
            }

            i {
                margin: 0px 10px;
            }
        }

        p {
            font-size: $fontH16;
            color: $labelColor;
        }

        div {
            span {
                color: $headerTitle;
                font-size: $fontH14;
                white-space: nowrap;
            }

            button {
                color: $labelColor;
                font-size: $fontH16;
            }
        }
    }
}

//统一弹窗属性设置
@mixin mobileAlertHeader {
    height: 54px !important;
}

@mixin mobileAlertBody {
    height: calc(100% - 118px) !important;
    overflow: auto;
}

@mixin mobileAlertFooter {
    .el-button {
        flex: 1;
        height: 100%;
    }
}

//统一table表头设置
@mixin tableHeader {
    font-size: $fontH14;
    color: $textColor_3;
    height: $main-titleHeight;
    line-height: $main-titleHeight;
}

@import "./mobileStyle.scss";
@import "./style-black.scss";
@import "./style-white.scss";

@import "./el-drawer.scss";
@import "./el-dialog.scss";
@import "./noDataTips.scss";
